<template>
    <div>
        <h1>会员修改</h1>
        {{info}}
        <table class="table table-bordered">
            <tbody>
                <tr>
                    <td align="right">会员编号</td>
                    <td><input type="text" v-model="info.memberCode" disabled></td>
                </tr>
                <tr>
                    <td align="right">手机号</td>
                    <td><input type="text" v-model="info.tel" maxlength="11"></td>
                </tr>
                <tr>
                    <td align="right">姓名</td>
                    <td><input type="text" v-model="info.userName"></td>
                </tr>
                <tr>
                    <td align="right">证件类型</td>
                    <td>
                        <select v-model="info.cardType">
                            <option value="">请选择</option>
                            <option :value="item" v-for="item in arr">{{item}}</option>
                        </select>
                    </td>
                </tr>
                <tr>
                    <td align="right">证件号码</td>
                    <td><input type="text" v-model="info.card" maxlength="18"></td>
                </tr>
                <tr>
                    <td align="right">会员生日</td>
                    <td><input type="date" v-model="info.birthDay"></td>
                </tr>
                <tr>
                    <td align="right">会员积分</td>
                    <td><input type="text" v-model="info.score"></td>
                </tr>
                <tr>
                    <td align="right">会员余额</td>
                    <td><input type="text" v-model="info.money"></td>
                </tr>
                <tr>
                    <td align="right">会员等级</td>
                    <td>
                        <select v-model="info.levelId">
                            <option value="">请选择</option>
                            <option :value="item.id" v-for="item in lavelist">{{item.levelName}}</option>
                        </select>
                    </td>
                </tr>
                <tr>
                    <td align="right">会员性别</td>
                    <td>
                        <input type="radio" value="1" name="sex" v-model="info.gender">男
                        <input type="radio" value="0" name="sex" v-model="info.gender">女            
                    </td>
                </tr>
                <tr>
                    <td align="right">会员爱好</td>
                    <td>
                        <input type="checkbox" name="likes" v-model="info.likes" value="吃">吃
                        <input type="checkbox" name="likes" v-model="info.likes" value="喝">喝
                        <input type="checkbox" name="likes" v-model="info.likes" value="嫖">嫖
                        <input type="checkbox" name="likes" v-model="info.likes" value="赌">赌
                        <input type="checkbox" name="likes" v-model="info.likes" value="抽">抽
                    </td>
                </tr>
                <tr>
                    <td align="right">会员简介</td>
                    <td>
                        <textarea rows="5" cols="50" v-model="info.desc"></textarea>
                    </td>
                </tr>
                <tr>
                    <td align="right">是否同意条款</td>
                    <td>
                        <input type="checkbox" v-model="info.isagree">XXX条款
                    </td>
                </tr>
                <tr>
                    <td align="right"></td>
                    <td>
                        <input type="button" value="确定" class="btn btn-success" @click="ok">
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
</template>

<script setup lang="ts">
import{ref,reactive,onMounted} from 'vue';
import axios from 'axios';
import moment from 'moment';
import {useRouter,useRoute}from 'vue-router';
//路由器对象
const router=useRouter();
//路由信息对象
const route=useRoute();
//声明一个变量,获取增加会员时所需的数据
let info:any =reactive({
    "mId":route.query.id,
    "memberCode": moment(new Date()).format('YYYYMMDD')+Math.random().toString().substr(3,3),
    "tel": "",
    "userName": "",
    "card": "",
    "birthDay": "",
    "score": '',
    "money": '',
    "levelId": '',
    "gender": 1,
    "likes": [],
    "desc": "",
    "isagree": '',
    "state": '',
    "cardType":'',
})
let arr:any=ref(["身份证","驾驶证","军人证","护照"]);

//获取会员等级
//onmouseenter 相当于文档就绪函数 生命周期钩子函数(12个)
onMounted(()=>{
    //发送网络请求获取等级列表
    getLeveList();
    gerData();
})
//修改第二件事 反填
const gerData=()=>{
    axios({
        url:'/api/Members/FindMember',
        method:'get',
        params:{
            id:route.query.id,
        },
    })
    .then((res)=>{
        console.log(res);
        //第一种
        //info.tel=res.data.tel;
        //第二种
        Object.assign(info,res.data);
        info.birthDay=res.data.birthDay.substring(0,10);//时间反填
        info.likes=res.data.likes.split(',');//将字符串转换成数组
    })
    .catch((err)=>{
        console.log(err);
        
    })
}

//声明一个变量接收等级列表
let lavelist:any=ref([]);
//获取等级列表
const getLeveList=()=>{
    axios({
        url:'/api/Members/GetMemberLevel',
        method:'get',
    })
    .then((res)=>{
        console.log(res);
        lavelist.value=res.data;
    })
    .catch((err)=>{
        console.log(err);
    })
};
//做成会员修改
const ok =()=>{
    //1.有效性判断
    if(info.tel==""){
        alert('手机号不能为空');
        return;
    }
    let reg=/^1[3-9]\d{9}$/;
    if(reg.test(info.tel)==false){
        alert('手机号不合法');
        return;
    }
    if(info.userName==""){
        alert('姓名不能为空');
        return;
    }
    if(info.card==""){
        alert('身份证号码不能为空');
        return;
    }
    let reg1=/^\d{17}[0-9xX]$/;
    if(reg1.test(info.card)==false){
        alert('身份证号码不合法');
        return;
    }
    if(info.birthDay==""){
        alert('生日必填');
        return;
    }
    if(info.score==""){
        alert('积分不能为空');
        return;
    }
    let reg2=/^[+]?\d+$/;
    if(reg2.test(info.score)==false){
        alert('积分只能是正数');
        return;
    }
    if(info.money==""){
        alert('余额不能为空');
        return;
    }
    if(reg2.test(info.money)==false){
        alert('余额只能是正数');
        return;
    }
    if(info.levelId==""){
        alert('等级必选');
        return;
    }
    if(info.likes.length==0){
        alert('爱好必选');
        return;
    }
    if(info.desc==""){
        alert('简介不能为空');
        return;
    }
    let reg3=/^[\u4e00-\u9fa5](1,50)$/;
    if(reg3.test(info.desc)==true){
        alert('只能是50以内的汉字');
        return;
    }
    if(info.isagree==false){
        alert('同意条款必选');
        return;
    }
    //2.做增加操作
    info.likes=info.likes.toString();
    axios({
        url:'/api/Members/UpdateMember',
        method:'put',
        data:info,
    })
    .then((res)=>{
        console.log(res);
        if(res.data==-1){
            alert('手机号重复');
            return;
        }
        if(res.data>0){
            alert('修改成功');
            //跳转到会员列表
            router.push("/memberList");
            return;
        }
        else{
            alert('修改失败');
            return
        }
    })
    .catch((err)=>{
        console.log(err);
    });
}
</script>

<style scoped>

</style>